<template>
  <div class="h-80 w-full flex flex-col">
    <div ref="echartsContainerRef" class="flex-1 h-0"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, shallowRef, watch } from 'vue'
import * as echarts from 'echarts'
import { useEchartsResizeAndDestory } from '../hooks/EchartsResizeAndDestoryHooks'

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  initData: {
    type: Object,
    default: () => {},
  },
})
console.log('props', props)
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
const option = {
  backgroundColor: '#fff',
  title: {
    text: '销售统计',
    textStyle: {
      fontSize: 12,
      fontWeight: 400,
    },
    left: 'center',
    top: '5%',
  },
  legend: {
    icon: 'circle',
    top: '5%',
    right: '5%',
    itemWidth: 6,
    itemGap: 20,
    textStyle: {
      color: '#556677',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        show: true,
        backgroundColor: '#fff',
        color: '#556677',
        borderColor: 'rgba(0,0,0,0)',
        shadowColor: 'rgba(0,0,0,0)',
        shadowOffsetY: 0,
      },
      lineStyle: {
        width: 0,
      },
    },
    backgroundColor: '#fff',
    textStyle: {
      color: '#5c6c7c',
    },
    padding: [10, 10],
    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
  },
  grid: {
    top: '15%',
  },
  xAxis: [
    {
      type: 'category',
      data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
      axisLine: {
        lineStyle: {
          color: '#DCE2E8',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#556677',
        },
        fontSize: 12,
        margin: 15,
      },
      axisPointer: {
        label: {
          padding: [11, 5, 7],
          margin: 15,
          fontSize: 12,
          backgroundColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#fff', // 0% 处的颜色
              },
              {
                // offset: 0.9,
                offset: 0.86,
                /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
                        
                        */
                color: '#fff', // 0% 处的颜色
              },
              {
                offset: 0.86,
                color: '#33c0cd', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#33c0cd', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        lineStyle: {
          color: '#DCE2E8',
        },
      },
      splitLine: {
        show: false,
      },
    },
    {
      type: 'value',
      position: 'right',
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: '#556677',
        },
        formatter: '{value}',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#DCE2E8',
        },
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: 'Adidas',
      type: 'line',
      data: props.initData.adidas,
      barWidth: '40%',
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: '#9effff',
          },
          {
            offset: 1,
            color: '#9E87FF',
          },
        ]),
        shadowColor: 'rgba(158,135,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        normal: {
          color: colorList[0],
          borderColor: colorList[0],
        },
      },
    },
    {
      name: 'Nike',
      type: 'line',
      data: props.initData.nike,
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: '#73DD39',
          },
          {
            offset: 1,
            color: '#73DDFF',
          },
        ]),
        shadowColor: 'rgba(115,221,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        normal: {
          color: colorList[1],
          borderColor: colorList[1],
        },
      },
    },
    {
      name: '老北京布鞋',
      type: 'line',
      data: props.initData.beijing,
      symbolSize: 1,
      yAxisIndex: 1,
      symbol: 'circle',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: '#fe9a',
          },
          {
            offset: 1,
            color: '#fe9a8b',
          },
        ]),
        shadowColor: 'rgba(254,154,139, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        normal: {
          color: colorList[2],
          borderColor: colorList[2],
        },
      },
    },
  ],
}
onMounted(() => {
  init()
})
const echartsContainerRef = ref()
const chartInstance = shallowRef()
useEchartsResizeAndDestory(chartInstance, echartsContainerRef)
function init() {
  chartInit()
}
function chartInit() {
  const echartsContainer = echartsContainerRef.value
  if (!echartsContainer) return

  chartInstance.value = echarts.init(echartsContainer)
  chartInstance.value.setOption(option)
}
watch(
  () => props.initData,
  newData => {
    if (chartInstance.value) {
      chartInstance.value.setOption({
        series: [
          {
            name: 'Adidas',
            data: newData.adidas,
          },
          {
            name: 'Nike',
            data: newData.nike,
          },
          {
            name: '老北京布鞋',
            data: newData.beijing,
          },
        ],
      })
    }
  },
  { deep: true }
)
</script>
